<script setup>
import { computed, ref, reactive } from 'vue'
import { addRequestService, getByWorkerIdService } from '@/api/leaveRequest'
import { getUserInfo } from '@/api/userInfo'

import { ElMessage } from 'element-plus'

const tableData = reactive([])

//搜索列表内容
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.detail.toLowerCase().includes(search.value.toLowerCase())
    )
)

// const roomNumber = ref('')
const form = reactive({ 'workerId': '', 'detail': '', 'start': '', 'end': '' })

const pageNum = ref(1)
const total = ref(20)
const pageSize = ref(10)

async function getRequestList() {
    tableData.length = 0
    let result = await getUserInfo()
    form.workerId = result.data.userId
    let res = await getByWorkerIdService(pageNum.value, pageSize.value, form.workerId)
    // console.log(res.data)
    total.value = res.data.total
    for (let i = 0; i < res.data.items.length; i++) {
        tableData.push(res.data.items[i])
    }
}

getRequestList()

const onSizeChange = (size) => {
    pageSize.value = size
    getRequestList()
}
const onCurrentChange = (num) => {
    pageNum.value = num
    getRequestList()
}


const dialogFormVisible = ref(false)
const time = ref('')

const openForm = () => {
    form.detail = ''
    form.start = ''
    form.end = ''
    dialogFormVisible.value = true
}

const addRequest = async () => {
    await addRequestService(form)
    ElMessage.success('申请成功，请注意查看审核进度')
    getRequestList()
    // console.log(time.value)
    dialogFormVisible.value = false
}

const classObje = (status) => {
    if (status === 1) {
        return { color: "lightgreen" }
    } else if (status === 0) {
        return { color: "lightgray" }
    } else if (status === 2) {
        return { color: "brown" }
    }
}

const rules = {
    detail: [{ required: true, message: '描述不可为空！', trigger: 'blur' }],
    start: [{ required: true, message: '时间不可为空！', trigger: 'blur' }],
    end: [{ required: true, message: '时间不可为空！', trigger: 'blur' }]
}

const checkStart = (data) => {
    return data.getTime() < new Date().getTime() - 86400000;//  - 86400000是否包括当天
}
const checkEnd = (data) => {
    // console.log(form.start)
    // console.log(data)
    return data.getTime() <  new Date(form.start).getTime()
}
</script>

<template>
    <div style="width: 100%;padding:25px;">
        <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
            <el-button type="primary" @click="openForm"
                style="width: 70px;background-color: rgb(19, 179, 232);color: white;">申请请假</el-button>
            <el-input v-model="search" placeholder="查找" style="width: 200px;margin-left:100vh;" />
        </div>
        <el-table :data="filterTableData" border style="min-width:calc(100vh - 200px)">
            <el-table-column label="ID" prop="id" width="70px" sortable />
            <!-- <el-table-column label="工号" prop="workerId" sortable width="120px" />
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="部门" prop="department" /> -->
            <el-table-column label="描述" prop="detail" />
            <el-table-column label="起始时间" prop="start" />
            <el-table-column label="结束时间" prop="end" />
            <el-table-column label="状态" sortable prop="status" width="90px">
                <template #default="scope">
                    <span :style="classObje(scope.row.status)">
                        <i v-if="scope.row.status === 0">待审核</i>
                        <i v-if="scope.row.status === 1">已通过</i>
                        <i v-if="scope.row.status === 2">未通过</i>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 10px 0;">
            <el-pagination v-model:current-page="pageNum" v-model:page-size='pageSize' :page-sizes="[5, 10]"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="onSizeChange"
                @current-change="onCurrentChange" />
        </div>
    </div>

    <el-dialog v-model="dialogFormVisible" title="提交申请">
        <el-form :model="form" :rules="rules" style="width: 90%;">
            <el-form-item label="描述" :label-width="100" prop="detail">
                <el-input v-model="form.detail" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="时间" :label-width="100">
                <el-form-item prop="start">
                    <el-date-picker v-model="form.start" type="datetime" placeholder="开始时间" format='YYYY-MM-DD HH:mm:ss'
                        value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="checkStart" />
                </el-form-item>
                <el-form-item prop="end">
                    <el-date-picker v-model="form.end" type="datetime" placeholder="结束时间" format='YYYY-MM-DD HH:mm:ss'
                        value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="checkEnd"/>
                </el-form-item>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="addRequest">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>